<template>
	<view class="container">
		<view class="content pad30">

			<view class="yhq_dl" v-for="(item,index) in rows" :key="index">
				<view class="yhq_dt">
					<view class="yhq_title">{{item.type}}</view>
					<view class="yhq_txt">{{item.name}}</view>
					<view class="yhq_gz" @click="gzbtn" :data-index="index">使用规则<text
							class="iconfont icon-anniu-jiantouxiangyou_o"></text></view>
				</view>
				<view class="yhq_dd">
					<view class="yhq_price">￥<text>{{item.price}}</text></view>
					<view class="yhq_jaz">价值</view>
					<view class="yhq_btn" @tap="lingqu(item.id)" data-index="{{index}}">立即领取</view>
				</view>
			</view>


		</view>
		<!--规则弹窗-->
		<view class="modal-mask" @click="hideModal" v-if="showModal"></view>
		<view class="modal-dialog" v-if="showModal">
			<view class="modal-content">
				<view class="modal-title">使用规则</view>
				<view class="modal-close" @click="hideModal">
					<view></view>
				</view>
				<view class="modal-box">
					<rich-text :nodes="xiangqing"></rich-text>
				</view>
			</view>
		</view>
		<!--规则弹窗end-->
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				xiangqing: '',
				rows: [],
				showModal: false
			}
		},
		onLoad() {
			var userid = wx.getStorageInfoSync('yygh_user_id');
			if (!userid) {

			}
			var $this = this
			API.post("coupon/getCoupon").then((res) => {
				if (res.code == 1) {
					$this.rows = res.data
				}
			})

		},
		methods: {
			lingqu(id) {
				var $this = this
				API.post("coupon/lingqu", {
					id: id
				}).then((res) => {
					if (res.code == 1) {
						API.showModal(res.msg)
					} else if (res.msg == "nologin") {
						API.showModal(res.msg, "/pages/user/login/login")
					} else {
						API.showModal(res.msg)
					}
				})
			},
			gzbtn(e) {
				var index = e.currentTarget.dataset.index;
				this.xiangqing = this.rows[index].content
				this.showModal = true;

			},
			hideModal() {
				this.showModal = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {
		padding-bottom: 40rpx;
	}

	.yhq_dl {
		width: 100%;
		display: flex;
		position: relative;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.yhq_dl:after,
	.yhq_dl:before {
		content: '';
		position: absolute;
		right: 194rpx;
		background: #f7f7f7;
		width: 24rpx;
		height: 24rpx;
		border-radius: 24rpx;
	}

	.yhq_dl:after {
		top: -12rpx;
	}

	.yhq_dl:before {
		bottom: -12rpx;
	}

	.yhq_dt {
		flex: 1;
		padding: 24rpx 30rpx;
		border-right: 2rpx #eee dashed;
	}

	.yhq_dd {
		width: 204rpx;
		text-align: center;
	}

	.yhq_title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.yhq_txt {
		margin-top: 20rpx;
		font-size: 26rpx;
		min-height: 72rpx;
		line-height: 36rpx;
	}

	.yhq_gz {
		margin-top: 22rpx;
		width: 100%;
		overflow: hidden;
		color: #999;
	}

	.yhq_gz .iconfont {
		font-size: 28rpx;
		margin-left: 6rpx;
	}

	.yhq_price {
		margin-top: 26rpx;
		font-weight: bold;
		color: #ff6600;
	}

	.yhq_price text {
		font-size: 44rpx;
	}

	.yhq_jaz {
		color: #666;
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	.yhq_btn {
		margin: 30rpx auto 0;
		font-size: 28rpx;
		display: inline-block;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 48rpx;
		color: #fff;
		background: $color;
	}
</style>